<template>
    <div>
        <div class="user-banner banner">
            <h1 class="banner-title">个人中心</h1>
        </div>

        <v-card class="blog-container"  >

            <div>
                <span class="info-title">基本信息</span>
            </div>
            <v-row class="info-wrapper" >
                <v-col md="3" cols="12" >
                    <button id="pick-avatar">
                        <v-avatar size="140">

                            <img :src="form.avatar"/>
                        </v-avatar>
                    </button>
                    <avatar-cropper
                            @uploaded="uploadAvatar"
                            trigger="#pick-avatar"
                            upload-url="http://192.168.123.223:8081/blog/files/upload"
                    />
                </v-col>
                <v-col md="7" cols="12" >

                    <v-text-field
                            v-model="form.nick"
                            class="mt-7"
                            label="昵称"
                            @keyup.enter="updataUserInfo"
                            color="success"
                            placeholder="请输入您的昵称"
                    />
                    <v-text-field
                            v-model="form.age"
                            class="mt-7"
                            label="年龄"
                            name="age"
                            placeholder="请输入你的年龄"
                    />
                    <v-text-field
                            v-model="form.introduce"
                            class="mt-7"
                            label="个性签名"
                            placeholder="介绍下自己吧"
                            id="t1"
                    />

                    <v-text-field
                            v-model="form.points"
                            class="mt-7"
                            label="博客积分"
                            disabled
                    />
                    <v-text-field
                            disabled
                            v-model="form.regtime"
                            class="mt-7"
                            label="注册时间"
                            placeholder="注册时间"
                    />
                    <div v-if="loginType != 0" class="mt-7 binding">
                        <v-text-field
                                disabled
                                v-model="form.username"
                                label="邮箱号"
                                placeholder="请绑定邮箱"
                        />
                        <v-btn v-if="email" text small @click="openEmailModel">
                            修改绑定
                        </v-btn>
                        <v-btn v-else text small @click="openEmailModel">
                            绑定邮箱
                        </v-btn>
                    </div>
                    <v-btn @keyup.enter="updataUserInfo"  @click="updataUserInfo"  style="background: green;color: white" outlined class="mt-5">修改</v-btn>
                </v-col>
            </v-row>
        </v-card>
    </div>
</template>

<script>
    import AvatarCropper from "vue-avatar-cropper";
    import request from "../../utils/request";

    export default {
        components: {AvatarCropper},
        data: function () {
            return {
                comments:{},
                form: {nick:'游客',avatar:'',age:''},
                userInfo: {
                    nickname: this.$store.state.nickname,
                    intro: this.$store.state.intro,
                    webSite: this.$store.state.webSite,
                    loginType: this.$store.state.loginType,
                    points: this.$store.state.points
                }
            };
        },
        mounted() {
            let str = sessionStorage.getItem("user")
            this.form = JSON.parse(str)
            request.get("/user/info/"+this.form.id).then(res => {
                this.form.points=res.user.points
                // sessionStorage.setItem("user",JSON.stringify(res.data))
            })
        },
        created(){
            if (this.form.avatar === '') {
                this.form.avatar='https://img1.baidu.com/it/u=4169370716,188510386&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=223'
            }


        },
        methods: {
            updataUserInfo() {

                request.put("/person/updateUser", this.form).then(res => {
                    console.log(res)
                    if (res.code === 20000) {
                        this.$toast({type: "success", message: "修改成功"});
                        sessionStorage.setItem("user", JSON.stringify(this.form))
                        this.$emit('userInfo')
                        this.$router.go(0);

                    } else {
                        this.$toast({type: "error", message: res.message});
                    }
                })
            },


            uploadAvatar(res) {
                this.form.avatar = res.data

                this.updataUserInfo()

            },
            openEmailModel() {
                this.$store.state.emailFlag = true;
            }
        },
        computed: {
            email() {
                return this.$store.state.email;
            },
            loginType() {
                return this.$store.state.loginType;
            }
        }
    };
</script>

<style scoped>


    .user-banner {
        background: url(https://static.talkxj.com/config/643f28683e1c59a80ccfc9cb19735a9c.jpg) center center / cover no-repeat;
        background-color: #49b1f5;
    }

    .info-title {
        font-size: 1.25rem;
        font-weight: bold;
    }

    .info-wrapper {
        margin-top: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #pick-avatar {
        outline: none;
    }

    .binding {
        display: flex;
        align-items: center;
    }
</style>
